import { t } from 'i18next'
import React, { forwardRef, ReactNode, useImperativeHandle } from 'react'
import { StyledVmpPoll } from './style'
import { Select, InputNumber, CheckBox } from '@kedacom/react-next'
import { Alert } from '@/components/Alert'
import useService from './service'
import { Poll } from '../interface'
import { useVmpTypeStore } from '../store.get'

export interface VmpPollProps {
	pollData: Poll | null
	disabled: boolean
	children?: ReactNode
}
export interface PollRef {
	testValue: () => boolean
	getValue: () => Poll
}
const VmpPoll = forwardRef((props: VmpPollProps, ref: React.Ref<PollRef>) => {
	const { pollData, disabled } = props
	const useStore = useVmpTypeStore((state) => state.getStore())
	const _pollMembers = useStore((state) => state._pollMembers)
	const {
		pollIntervalOptions,
		pollIntervalOptionsVal,
		setPollIntervalOptionsVal,
		pollInterval,
		setPollInterval,
		unlimited,
		setUnlimited,
		planOptions,
		planValue,
		changePlan,
		pollTimes,
		setPollTimes,
	} = useService(pollData)
	useImperativeHandle(ref, () => ({
		testValue() {
			if (pollIntervalOptionsVal === 0) {
				if (pollInterval === '') {
					Alert(t('请设置轮询间隔'))
					return false
				} else if (Number(pollInterval) < 5 || Number(pollInterval) > 7200) {
					Alert(t('轮询间隔应为5~7200秒'))
					return false
				}
			}
			if (!unlimited) {
				if (pollTimes === '') {
					Alert(t('请设置轮询次数'))
					return false
				} else if (Number(pollTimes) < 1 || Number(pollTimes) > 9999) {
					Alert(t('轮询次数应为1~9999次'))
					return false
				}
			}
			if (_pollMembers.length === 0) {
				Alert(t('批量轮询列表不能为空'))
				return false
			}
			return true
		},
		getValue() {
			return {
				id: '',
				mode: 1,
				name: planValue === '0' ? '' : planOptions.find((item) => item.value === planValue)?.label ?? '',
				keep_time: pollIntervalOptionsVal !== 0 ? pollIntervalOptionsVal : Number(pollInterval),
				num: unlimited ? 0 : Number(pollTimes),
				members: _pollMembers,
			}
		},
	}))
	return (
		<StyledVmpPoll className={`${disabled ? 'disabled' : ''}`}>
			<div className="batch_poll_plan_wrap">
				<span className="label">{t('轮询预案')}</span>
				<Select
					width={366}
					options={planOptions}
					value={planValue}
					onClick={(e, v) => changePlan(v)}
					disabled={disabled}
				/>
			</div>
			<div className="batch_poll_setting_wrap">
				<div className="options batch_poll_interval">
					<span className="label">{t('轮询间隔')}</span>
					<Select
						className="batch-poll-interval-select__i18n"
						panelClassName="batch-poll-interval-panel__i18n"
						width={80}
						options={pollIntervalOptions}
						value={pollIntervalOptionsVal}
						onChange={(e, v) => {
							setPollIntervalOptionsVal(v)
							setPollInterval('5')
						}}
						disabled={disabled}
					/>
					{pollIntervalOptionsVal === 0 && (
						<div className="seconds">
							<InputNumber
								width={40}
								value={pollInterval}
								onChange={(e, v) => setPollInterval(v)}
								disabled={disabled}
								maxLength={4}
							/>
							<span className="msg">{t('5~7200秒')}</span>
						</div>
					)}
				</div>
				<div className="options batch_poll_num">
					<span className="label">{t('轮询次数')}</span>
					<InputNumber
						width={40}
						disabled={unlimited || disabled}
						value={pollTimes}
						onChange={(e, val) => setPollTimes(val)}
						maxLength={4}
					/>
					<span className={`${unlimited || disabled ? 'disabled' : ''} msg`}>{t('1~9999次')}</span>
					<CheckBox
						className="unlimited"
						checked={unlimited}
						onChange={(e, val) => setUnlimited(val)}
						disabled={disabled}
					>
						{t('不限次数')}
					</CheckBox>
				</div>
			</div>
		</StyledVmpPoll>
	)
})
export default VmpPoll
